<template>
  <div class='wrap'>
    <!--默认-->
    <div class='margin-l color-w' v-if='type=="title"'>
      <span class='vetical'></span>
      <span :style='lable'>{{title}}</span>
    </div>
    <!--默认简洁concise-->
    <div class='margin-l color-w' v-if='type=="concise"'>
      <span :style='concise'>{{title}}</span>
    </div>
    <!--加说明内容-->
    <div class='margin-l color-w' v-if='type=="addContent"'>
      <span class='vetical'></span>
      <span :style='lable'>{{title}}</span>
      <img class='rightGo' v-if='rightGo' :src="rightSrc" @click='moreFunc()' alt="">
      <span class='content padding-r'>{{content}}</span>
    </div>
    <!--更多-->
    <div class='margin-l color-w' v-if='type=="more"'>
      <span class='vetical'></span>
      <span :style='lable'>{{title}}</span>
      <img class='rightGo' v-if='rightGo' :src="moreSrc" @click='moreFunc()' alt="">
    </div>
    <!--icon-->
    <div class='margin-l color-w' v-if='type=="icon"'>
      <img class='titleIcon' :src="src" alt=""><span :style='lable'>{{title}}</span>
      <img class='rightGo' v-if='rightGo' :src="moreSrc" @click='moreFunc()' alt="">
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';

  export default {
    name: "state-title",
    props: {
      type: {type: String, default: ""},
      title: {type: String, default: "标题"},
      content: {type: String, default: "内容"},
      rightGo: {type: Boolean, default: true},
      src: {type: String, default: '../../static/images/logo.png'},
      rightSrc: {type: String, default: '../../static/images/rightGo1.png'},
      moreSrc: {type: String, default: '../../static/images/more.png'},
      lable: {
        type: Array, default() {
          return[{
            color: '#353638',
            fontSize: '.65rem',
            lineHeight: '2.2rem',
            fontWeight: 'bold'
          }
          ]
        }
      },
      concise: {
        type: Array, default() {
          return [{
            color: '#a2a9b0',
            fontSize: '.65rem',
            lineHeight: '2.2rem',
            fontWeight: 'normal'
          }]
        }
      },
      evenMore:{
        type:Function,
        default:null
      }
    },
    methods:{
      moreFunc(){
        this.evenMore();
      }
    }
  }
</script>
<style scoped>
  .wrap {
    background-color: #fff;
    position: relative;
  }

  .color-w {
    background-color: #fff;
  }

  .lable {
    color: #353638;
    font-size: .65rem;
    font-weight: bold;
    line-height: 2.2rem;
  }

  .concise {
    color: #a2a9b0;
    font-weight: normal;
  }

  .margin-l {
    margin-left: .75rem;
  }

  .padding-r {
    padding-right: 0.5rem;
  }

  .content {
    color: #a2a9b0;
    font-size: .7rem;
    float: right;
  }

  .vetical {
    display: inline-block;
    background: #38adff;
    width: 0.15rem;
    height: .6rem;
    border-radius: .2rem;
    margin-bottom: -0.1rem;
  }

  .content {
    color: #a2a9b0;
    font-size: .7rem;
    float: right;
    line-height: 2.2rem;
  }

  .rightGo {
    float: right;
    padding-right: 0.75rem;
    vertical-align: middle;
    height: 1rem;
    margin-top: .6rem;
  }

  .titleIcon {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    margin-right: .5rem;
    vertical-align: middle;
    margin-bottom: -0.2rem;
  }

</style>
